/* eslint-disable react-hooks/exhaustive-deps */
import { Input, Select } from "antd";
import React, { useEffect, useState } from "react";
import "./index.less";
const { Search } = Input;
const { Option } = Select;
interface HomePropsType {
    modalType: number;
    handleProcess: any;
    process: any;
    onSearch: any;
    getProcedureList: any;
    procedureList: any;
    databaseName: any;
    getDatabasesList: any;
    handleDatabase: any;
    databasesList: any;
    tableName: any;
    getTableList: any;
    handleTable: any;
    tablesList: any;
    fieldName: any;
    getFieldList: any;
    handleField: any;
    fieldList: any;
    column: any;
    setColumnFn: any;
    value: any;
    setValueFn: any;
    projectName: any;
    setProjectNameFn: any;
    templateName: any;
    setTemplateNameFn: any;
}
const ModalContent: React.FC<HomePropsType> = ({
    modalType,
    handleProcess,
    process,
    onSearch,
    getProcedureList,
    procedureList,
    databaseName,
    getDatabasesList,
    handleDatabase,
    databasesList,
    tableName,
    getTableList,
    handleTable,
    tablesList,
    fieldName,
    getFieldList,
    handleField,
    fieldList,
    column,
    setColumnFn,
    value,
    setValueFn,
    projectName,
    setProjectNameFn,
    templateName,
    setTemplateNameFn,
}) => {
    // 模态框展示内容
    const modalRender = (renderType: number) => {
        // 流程绑定
        switch (renderType) {
            case 1:
                return (
                    <Select
                        style={{ width: "100%" }}
                        value={process}
                        placeholder="请选择暂未绑定的模板流程"
                        onChange={handleProcess}
                        showSearch
                        onSearch={(value: any) => onSearch(value, 1)}
                        onClear={() => getProcedureList("")}
                        dropdownClassName="dropdown"
                    >
                        {procedureList?.map((item: any) => {
                            return (
                                <Option key={item.procedureId} className="option_list" value={item.procedureId}>
                                    {item.procedureName}
                                </Option>
                            );
                        })}
                    </Select>
                );
            case 2:
                return (
                    <div className="data_select">
                        <div className="line_center">
                            {" "}
                            <span>
                                数据库<span className="start">*</span>
                            </span>{" "}
                            <Select
                                style={{ flex: "1" }}
                                value={databaseName}
                                dropdownClassName="dropdown"
                                placeholder="请选择数据源"
                                showSearch
                                onSearch={(value: any) => onSearch(value, 2)}
                                onClear={() => getDatabasesList("")}
                                onChange={handleDatabase}
                            >
                                {databasesList?.map((item: any) => {
                                    return (
                                        <Option key={item.databaseName} className="option_list" value={item.databaseName}>
                                            {item.databaseName}
                                        </Option>
                                    );
                                })}
                            </Select>
                        </div>
                        <div className="line_center">
                            {" "}
                            <span>
                                表名<span className="start">*</span>
                            </span>{" "}
                            <Select
                                style={{ flex: "1" }}
                                value={tableName}
                                disabled={databaseName ? false : true}
                                dropdownClassName="dropdown"
                                placeholder="请选择数据源"
                                showSearch
                                onSearch={(value: any) => onSearch(value, 3)}
                                onClear={() => getTableList({ name: "", databaseName })}
                                onChange={handleTable}
                            >
                                {tablesList?.map((item: any) => {
                                    return (
                                        <Option key={item.tableName} className="option_list" value={item.tableName}>
                                            {item.tableName}
                                        </Option>
                                    );
                                })}
                            </Select>
                        </div>
                        <div className="line_center">
                            {" "}
                            <span>
                                字段<span className="start">*</span>
                            </span>{" "}
                            <Select
                                style={{ flex: "1" }}
                                value={fieldName}
                                disabled={tableName ? false : true}
                                dropdownClassName="dropdown"
                                placeholder="请选择数据源"
                                showSearch
                                onClear={() => getFieldList({ name: "", databaseName, tableName })}
                                onSearch={(value: any) => onSearch(value, 4)}
                                onChange={handleField}
                            >
                                {fieldList?.map((item: any) => {
                                    return (
                                        <Option key={item.fieldName} className="option_list" value={item.fieldName}>
                                            {item.fieldName}
                                        </Option>
                                    );
                                })}
                            </Select>
                        </div>
                        <div className="line_center">
                            {" "}
                            <span>唯一键</span>{" "}
                            <Input
                                placeholder="请输入唯一键"
                                value={column}
                                onChange={(e) => {
                                    setColumnFn(e.target.value);
                                }}
                            />
                        </div>
                        <div className="line_center">
                            {" "}
                            <span>值</span>{" "}
                            <Input
                                placeholder="请输入值"
                                value={value}
                                onChange={(e) => {
                                    setValueFn(e.target.value);
                                }}
                            />
                        </div>
                    </div>
                );
            case 3:
                return (
                    <Input
                        placeholder="请输入项目名称"
                        value={projectName}
                        onChange={(e) => {
                            setProjectNameFn(e.target.value);
                        }}
                    />
                );
            case 4:
                return (
                    <Input
                        placeholder="请输入模板名称"
                        value={templateName}
                        onChange={(e) => {
                            setTemplateNameFn(e.target.value);
                        }}
                    />
                );
            case 5:
                return (
                    <Input
                        placeholder="请输入项目名称"
                        value={projectName}
                        onChange={(e) => {
                            setProjectNameFn(e.target.value);
                        }}
                    />
                );
            case 6:
                return (
                    <Input
                        placeholder="请输入模板名称"
                        value={templateName}
                        onChange={(e) => {
                            setTemplateNameFn(e.target.value);
                        }}
                    />
                );
            default:
                return false;
        }
    };
    return <>{modalRender(modalType)}</>;
};

export default ModalContent;
